<!-- 模板继承 -->
{extend name="public:base" /}

<!-- 页面标题 -->
{block name="title"}Administrator{/block}

<!-- 自定义css -->
{block name="css"}{/block}

<!-- 内容区域 -->
{block name="content"}
  <div class="nav-tabs-custom">
    <ul class="nav nav-tabs">
      <li class="active"><a href="{:url('admin/site/imageWater')}">{:lang($current)}</a></li>
      <li class="pull-right"><a href="javascript:history.back(-1);" class="text-muted"><i class="fa fa-chevron-circle-left"></i></a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active">
        <form role="form" id="operate">
            <div class="form-group">
              <label>{:lang('Status')}</label>
              <div class="row">
              <div class="col-md-4">
                <div class="radio">
                    <label class="radio-inline">
                        <input type="radio" {eq name="water_status" value="1"}checked{/eq} name="water_status" value="1"> {:lang('ON')}
                    </label>
                    <label class="radio-inline">
                        <input type="radio" {eq name="water_status" value="0"}checked{/eq} name="water_status" value="0"> {:lang('OFF')}
                    </label>
                </div>
              </div>
              </div>
              <p class="help-block"></p>
            </div>
            <div class="form-group">
              <label>{:lang('Image')}</label>
              <div class="row">
              <div class="col-md-4">
                <div class="layui-upload-drag" id="water_logo">
                  <input type="hidden" name="water_logo" value="{$water_logo}">
                  <div class="layui-upload-list" id="preview">
                  {empty name="water_logo"}
                  <p>{:lang('Upload')}</p>
                  {else /}
                  <img class="img-responsive" src="{$water_logo}" />
                  {/empty}
                  </div>
                </div>
              </div>
              </div>
            </div>
            <div class="form-group">
              <label>{:lang('Position')}</label>
              <div class="row">
              <div class="col-md-4">
                <div class="table-responsive">
                  <table class="table table-bordered">
                    <tbody>
                      <tr>
                        <td>
                            <label class="radio-inline">
                                <input type="radio" {eq name="water_position" value="1"}checked{/eq} name="water_position" value="1"> {:lang('North west')}
                            </label>
                        </td>
                        <td>
                            <label class="radio-inline">
                                <input type="radio" {eq name="water_position" value="2"}checked{/eq} name="water_position" value="2"> {:lang('North')}
                            </label>
                        </td>
                        <td>
                            <label class="radio-inline">
                                <input type="radio" {eq name="water_position" value="3"}checked{/eq} name="water_position" value="3"> {:lang('North east')}
                            </label>
                        </td>
                      </tr>
                      <tr>
                        <td>
                            <label class="radio-inline">
                                <input type="radio" {eq name="water_position" value="4"}checked{/eq} name="water_position" value="4"> {:lang('West')}
                            </label>
                        </td>
                        <td>
                            <label class="radio-inline">
                                <input type="radio" {eq name="water_position" value="5"}checked{/eq} name="water_position" value="5"> {:lang('Center')}
                            </label>
                        </td>
                        <td>
                            <label class="radio-inline">
                                <input type="radio" {eq name="water_position" value="6"}checked{/eq} name="water_position" value="6"> {:lang('East')}
                            </label>
                        </td>
                      </tr>
                      <tr>
                        <td>
                            <label class="radio-inline">
                                <input type="radio" {eq name="water_position" value="7"}checked{/eq} name="water_position" value="7"> {:lang('South west')}
                            </label>
                        </td>
                        <td>
                            <label class="radio-inline">
                                <input type="radio" {eq name="water_position" value="8"}checked{/eq} name="water_position" value="8"> {:lang('South')}
                            </label>
                        </td>
                        <td>
                            <label class="radio-inline">
                                <input type="radio" {eq name="water_position" value="9"}checked{/eq} name="water_position" value="9"> {:lang('South east')}
                            </label>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              </div>
            </div>
            <div class="form-group">
              <label>{:lang('Quality')}</label>
              <div class="row">
              <div class="col-md-4">
                <div class="input-group">
                    <span class="input-group-addon">{:lang('Range')}</span>
                    <input type="text" name="water_quality" value="{$water_quality}" class="form-control">
                </div>
              </div>
              </div>
              <p class="help-block">{:lang('Range')}：（0~100）</p>
            </div>
        </form>
      </div>
      <!-- /.tab-pane -->
    </div>
    <!-- /.tab-content -->
    <div class="box-footer">
        <div class="btn-group">
            <button class="btn btn-primary btn-flat" onclick="operate();" type="submit"> {:lang('Save')}</button>
        </div>
    </div>
  </div>
{/block}

<!-- 自定义js -->
{block name="js"}
<script>
layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  //拖拽上传
  upload.render({
    elem: "#water_logo"
    ,accept: 'file'
    ,multiple: false
    ,number: 1
    ,url: "{:url('admin/upload/uploadFile')}"
    ,done: function(res){
      if (res.code == 200) {
        $("[name='water_logo']").val(res.data.url);
        $("#preview").html("<img class=\'img-responsive\' src=\'"+res.data.url+"\'>");
      } else {
        swal({
          position: 'center',
          type: 'error',
          title: res.msg,
          showConfirmButton: false,
          toast:false,
          timer: 2000
        });
      }
    }
  });
  
});
</script>
<script type="text/javascript">
    function operate(){
        $.ajax({
            url:"{:url('admin/site/imageWater')}",
            data:$("#operate").serialize(),
            type:'post',
            dataType:'json',
            success:function(xhr){
                if(xhr.code == 200){
                    swal({
                      position: 'center',
                      type: 'success',
                      title: xhr.msg,
                      showConfirmButton: false,
                      toast:false,
                      timer: 2000
                    });
                } else{
                    swal({
                      position: 'center',
                      type: 'error',
                      title: xhr.msg,
                      showConfirmButton: false,
                      toast:false,
                      timer: 2000
                    });
                }
            }
        });
    }

</script>
{/block}